
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <title>新建抽奖</title>
	<style type="text/css">
	/*动态列表样式*/
	.optionList{list-style: none;margin: 0 0 0px 0px;padding: 0px;}
	.optionList li{display: block;height: 30px;line-height: 30px;margin-bottom: 20px;}
	.optionList li span, .optionList li input[type='text'], .optionList li input[type='text'], .optionList li input[type='text'], .optionList input[type='button']{display: inline-block;float:left;text-align: left;}
	.optionList li span{margin-right:10px;}
	.optionList li input[type='text']{margin-right:10px;}
	.optionList li input[type='text']{}
	.optionList li input[type='text']{}
	.optionList li input[type='button']{}
	</style>
    
    <!-- 业务css -->
	<link rel="stylesheet" type="text/css" href="${ctx}/resource/css/multi-select-metro.css" />
	<link href="${ctx}/resource/css/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
	
</head>

<body>
	<!-- 菜单及导航数据  -->
  	<data id="info" nav="lottery" menu="newLottery" service="抽奖服务" action="新建抽奖">

   <!-- 业务内容  -->
      <div class="row wrapper border-bottom white-bg page-heading animated zoomIn min-height">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>创建一个抽奖 <small class="text-navy">好东西不够分享吗？快来抽奖吧！听听大家尖叫的声音</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal" method="post" id="voteForm" action="">
                        	<div class="row">
								<div class="form-group">
									<label class="col-sm-3 control-label">抽奖标题</label>
									<div class="col-sm-7">
										<input type="text" id="lotteryName" name="title" class="form-control" placeholder="请输入一个抽奖标题，最大50个字符">
									</div>
								</div>
								<div class="hr-line-dashed"></div>
								<div id="data_1" class="form-group">
									<label class="col-sm-3 control-label">开始时间</label>
									<div class="col-sm-7">
										<div class="input-group date">
											<span class="input-group-addon">
											<i class="fa fa-calendar"></i></span>
												<input type="text" id="datetimepicker" name="startTime" value="" class="form-control">
										</div>
									</div>
								</div>
								<div id="data_1" class="form-group">
									<label class="col-sm-3 control-label">截止时间</label>
									<div class="col-sm-7">
										<div class="input-group date" data-date="2013-02-21T15:25:00Z">
											<span class="input-group-addon">
											<i class="fa fa-calendar"></i></span>
												<input type="text" id="datetimepicker1" name="endTime" value="" class="form-control">
										</div>
									</div>
								</div>
							 	<div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label">参与人员</label>
									<div class="col-sm-7" id="lotsMember">
										<select multiple="multiple" id="my_multi_select2" name="my_multi_select2[]">
											<optgroup label="全部"></optgroup>
										</select>
									</div>
								</div>
								<div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label"></label>
									<div class="col-sm-7">
										<div class="input-group m-b">
											<a class="btn btn-primary" id="addOption"><i class="icon-plus"></i>奖项添加</a>
										</div>
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-3 control-label">奖项设置</label>
									<div>
										<div class="col-sm-7">
										<div class="input-group m-b">
											<ul class="optionList"></ul>
										</div>
										</div>
									</div>
								</div>
								
                               </div>
							<div class="row">
								<div class="form-group ">
									<label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-7">
                                        <button type="button" class="btn btn-primary" id="savBtn">保存</button>
                                        <button type="reset" class="btn btn-white">重置</button>
                                    </div>
                                </div>
                               </div>
						</form>
					</div>
                </div>
            </div>
        </div>
       <!-- 业务部分  结束  -->
    <js>
    <script src="${ctx}/resource/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
    
    
    <script type="text/javascript" src="${ctx}/resource/js/wysihtml5-0.3.0.js"></script> 
    <script type="text/javascript" src="${ctx}/resource/js/chosen.jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/select2.min.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/jquery.inputmask.bundle.min.js"></script>   
	<script type="text/javascript" src="${ctx}/resource/js/jquery.input-ip-address-control-1.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/jquery.multi-select.js"></script>   
	<script type="text/javascript" src="${ctx}/resource/js/app.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/form-components.js"></script>        
	<script type="text/javascript" src="${ctx}/resource/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/lottery-event.js"></script>
	<script type="text/javascript" src="${ctx}/resource/js/jquery.datetimepicker.js"></script>
    <script>
		jQuery(document).ready(function() {
			// initiate layout and plugins
		jQuery.ajax({
			type : "POST",
			dataType : "json",
			url : "${ctx}/user/getAllUserId.do",
			success : function(data) {
				for(var i=0;i<data.length;i++){
					$("#my_multi_select2 optgroup").append("<option>"+data[i].uid+"</option>");
					$(".ms-selectable ul li ul.ms-optgroup").append("<li class='ms-elem-selectable' id='"+data[i].uid+"' onclick='chooseMen(this)'><span>"+data[i].name+"</span></li>");
					$(".ms-selection ul li ul.ms-optgroup").append("<li class='ms-elem-selection' id='"+data[i].uid+"' style='display: none;' onclick='reChoose(this)'><span>"+data[i].name+"</span></li>");
				}
			}
		})
			App.init();
			FormComponents.init();
 			<!--候选人的全选与反选-->
			$(".ms-selectable ul li ul.ms-optgroup li.ms-optgroup-label").click(function(){
				$(".ms-selection ul li ul.ms-optgroup li").each(function(){
						$(this).addClass("ms-selected");
						$(this).css({"display":"list-item"});
				});
				$(".ms-selectable ul li ul.ms-optgroup li.ms-elem-selectable").each(function(){
						$(this).css({"display":"none"});
				})
			})
			$(".ms-selection ul li ul.ms-optgroup li.ms-optgroup-label").click(function(){
				$(".ms-selection ul li ul.ms-optgroup li.ms-elem-selection").each(function(){
					$(this).removeClass("ms-selected");
					$(this).css({"display":"none"});
				});
				$(".ms-selectable ul li ul.ms-optgroup li").each(function(){
						$(this).css({"display":"block"});
				})
			});
			function init(){
		    	var option_1 = new OptionEntity(1);
// 		    	var option_2 = new OptionEntity(2);
		    	$(".optionList").append(option_1.option_li);
// 		    	$(".optionList").append(option_2.option_li);
		    }
			var option;
			init();
	    	$("#addOption").click(function(){
	    		if(options.length >= 10){
	    			return;
	    		}
	    		var optionIndex = options.length + 1;
	    		option = new OptionEntity(optionIndex);
	    		$(".optionList").append(option.option_li);
	    	});
	    	$("#savBtn").click(function(){
	    		var candidatesId = "";
	    		var candidate=$(".ms-selection ul li ul.ms-optgroup li.ms-selected");
	    		if(candidate.length == 0){
	    			layer.msg("请选择参与人员");
	    		}
	    		for(var i=0;i<candidate.length;i++){
	    			if($(candidate.get(i)).css("display") != 'none') {
						candidatesId+=candidate.get(i).id+",";
	    			}
				}
	    		var parmObj = {
   	    				title: $("#lotteryName").val(),
   	    				
   	    				type: 1,
   	    				startTime: $("#datetimepicker").val(),
   	    				deadline:$("#datetimepicker1").val(),
	    	    		candidateList :candidatesId,
	    	    		items : []
	    		}
				for (var i = 1; i <= options.length; i++) {
					var it = {
							title : $("#itemTitle"+i).val(),
	    	    			lotteryName : $("#lotteryName"+i).val(),
	    	    			orderNum : $("#orderNum"+i).val(),
	    	    			amount : $("#amount"+i).val(), 
	    	    			orderNum : $("#orderNum"+i).text()
					}
					parmObj.items[i-1] = it;
				}
	    		var index = parent.layer.getFrameIndex(window.name);
	    		$.ajax({  
	    		    type: "POST",  
	    		    url: "${ctx}/lottery/createLottery.do",  
	    		    data: JSON.stringify(parmObj),
	    		    dataType:"json",  
 	    		    contentType : 'application/json;charset=utf-8', //设置请求头信息  
	    		    success: function(data){
	    		    			if(data.flag) {
	    		    				parent.layer.msg(data.message);
	    		    				parent.location.href = '${ctx}/lottery/show.do?lid='+data.lid;
	    							parent.layer.close(index);
	                			} else {
	                				layer.alert(data.message);
	                			}
			    		    }
			    		});
			    	});
	    	$("#lotteryName").blur(function(){
   	    		$.post("${ctx}/lottery/checkTitle.do", {title: $("#lotteryName").val()}, function(data,status){
   	    			if(!data.flag) {
	   	    			layer.msg(data.message);
   	    			}
	    		});
  			});
	    	$('#datetimepicker').datetimepicker({
	    		yearOffset:0,
	    		showSecond: true, //显示秒
	    		format: 'Y-m-d H:m:s',//格式化时间
	    		stepHour: 1,//设置步长
	    		lang:'ch',
	    		stepMinute: 1,
	    		stepSecond: 1,
	    		minDate:'-1970/01/01', // yesterday is minimum date
	    		maxDate:'+4970/01/02' // and tommorow is maximum date calendar
	    	});
	    	$('#datetimepicker1').datetimepicker({
	    		yearOffset:0,
	    		lang:'ch',
	    		format:'Y-m-d H:m:s',
	    		formatDate:'Y/m/d',
	    		minDate:'-1970/01/01', // yesterday is minimum date
	    		maxDate:'+4970/01/02' // and tommorow is maximum date calendar
	    	});
	    	$(".ms-list").niceScroll({cursorborder:"",cursorcolor:"#18a689",boxzoom:true,touchbehavior:true,cursoropacitymax:0.7});

		});
		function chooseMen(obj){
			obj.style.display="none";
			var uid=obj.id;
			$(".ms-selection ul li ul.ms-optgroup li").each(function(){
				if(this.id==uid){
					$(this).addClass("ms-selected");
					$(this).css({"display":"list-item"});
				}
			})
		}
		function reChoose(obj){
			obj.style.display="none";
			var uid=obj.id;
			$(".ms-selectable ul li ul.ms-optgroup li").each(function(){
				if(this.id==uid){
					$(this).css({"display":"block"});
				}
			})
		}
	</script>
    </js>
</body>
</html>